<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>银行APP云闪付版焕新升级</title>
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body>
    <div class="wrap-box">
        <div class="upgrade-content content-box">
            <div class="max-width-560 new-word-title">
                <img src="images/new-title.png" alt="银行APP云闪付版">
            </div>
            <div class="max-width-560 new-word-upgrade">
                <div class="inner">
                    <div class="new-word">
                        <div class="mask">
                            <div class="mask-img">
                                <img src="images/new-word-mask.png" alt="">
                            </div>
                            <div class="bot-light"> <img src="images/bot-light3.png" alt=""> </div>
                        </div>
                        <div class="item front">
                            <img src="images/new-word-08.png" alt="新">
                            <div class="lihgt"></div>
                        </div>
                        <div class="item back"><img src="images/new-word-08-back.png" alt="新翻转"></div>

                    </div>
                    <!-- <img src="images/word-bg-08.png" class="new-word-bg" /> -->
                    <img src="images/word-bg-08.png" class="new-word-bg" />
                </div>
            </div>
            <div class="btn-box">
                <div class="upgrade-btn J-upgrade-btn">
                    <span class="hand animate"></span>
                    <img src="images/upgrade-btn.png" alt="焕新升级" class="upgrade-btn-img">
                </div>
                <span class="rule-btn J-rule-btn"> 活动规则 </span>
            </div>
        </div>
    </div>

    <!-- 升级成功弹框提示 start -->
    <div class="modalbox">
        <div class="modalbox-mask"></div>
        <div class="modalbox-cont upgrade-success-tips">
            <span data-href="lottery-tips.html" class="close next-btn"></span>
            <img src="images/upgrade-success-tips.png" alt="恭喜您升级成功">
        </div>
    </div>
    <!-- // end -->

    <!-- 活动规则弹框 start -->
    <div class="rule-popup">
        <div class="rule-popup-mask"></div>
        <div class="rule-popup-cont">
            <span class="close"></span>
            <div class="inner-scroll">
                <h3> <img src="images/rule-title.jpg" alt="活动规则"> </h3>
                <h4>活动时间</h4>
                <p><strong>2022年8月24日-2022年8月31日。</strong></p>
                <h4>参与方式</h4>
                <p>进入活动首页；授权微信号登录；点击首页“焕新升级”按钮，进入银行选择页，选择您的专属银行APP后，进入点亮焕新页面，不断点击“焕新升级”按钮，将“新”字点亮后，即可获得1次抽奖机会，奖品可在“我的奖品”中查看。
                </p>
                <h4>奖品设置</h4>
                <p><strong>华为P50手机2份；京东e卡200元20份；京东e卡100元60份。</strong></p>
                <h4>中奖公布</h4>
                <p>中奖名单将在活动结束后10个工作日内于“中国银联95516”微信公众号公布；<br/>
                    华为手机、京东e卡均以实物奖品寄出，所中奖品将在活动页面中提示。</p>
                <h4>活动注意事项</h4>
                <p>
                    <stong>1、</stong>
                    活动期间，同一用户每日仅限参与一次抽奖。符合同一设备、同一注册手机号、同一银行卡预留手机号、同一用户ID、同一身份证号、同一小程序授权手机号等任一条件的，均视为同一用户。
                </p>
                <p>2、仅限用户本人微信注册手机号领取奖品，领取资格仅限当月有效，逾期作废。</p>
                <p>3、用户同意并授权中国银联向奖品供应商等提供其手机号，姓名等信息，用于为用户发送奖品、联系用户获取收件地址等事宜。</p>
                <p>4、若中奖用户未在京东e卡卡面有效期内激活京东e卡奖品券码，之后造成的一切损失，与主办方无关，奖品不再补发。因获奖用户信息填写不完整、不准确、账户异常等自身原因导致未能领到奖品，后续不予补发。</p>
                <p>5、为使更多的用户享受到优惠权益，对使用或涉嫌使用违反规则或不正当方式套取银联优惠的用户及其所使用的工具，包括但不限于手机号等，中国银联有权不予优惠、追回已发放的优惠,并拒绝其今后参加银联任何优惠活动及享受任何银联卡权益。
                </p>
                <p>6、用户参与活动即视为理解并同意本活动细则。</p>
                <p>7、本次活动所有时间点以中国银联后台系统时间（北京时间）为准。如出现不可抗力事件或情势变更等情况（如重大灾害事件、受有权机关指令需停止或调整的、系统故障需暂停的、活动中存在违规作弊行为损害消费者权益的），在法律许可的范围内，银联保留调查、暂停和终止本活动的权力，并经公告后生效。
                </p>
                <p>8、本活动礼品由上海钛镁网络科技有限公司提供，相关礼品使用规则及售后问题请致电上海钛镁网络科技有限公司服务热线021-60443456咨询。</p>
                <p>9、各礼品兑换流程如下：</p>
                <p>京东e卡100元、京东e卡200元：中奖者在中奖页面填写其手机号，姓名、收件地址等信息，奖品将在名单公布后30个工作日内寄出，用户需要在卡面有效期内激活。</p>
                <p>华为P50手机：中奖者在中奖页面填写其手机号，姓名、收件地址等信息，奖品将在名单公布后30个工作日内寄出。</p>
            </div>
        </div>
    </div>
    <!-- //end -->

    <canvas id="canvas"></canvas>


    <!-- <script src="js/jquery.min.js"></script> -->
    <script src="js/Zepto.1.2.0.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="js/confetti.js"></script>
    <script src="js/common.js"></script>
    <script>

        isGoToIndex()  // 判断是否要去到首页 如果已经本地已经有localStorage.getItem('ipnone')

        $(function () {
            let newWordContainer = $('.new-word'),
                percentage = 100,
                scale = 5,
                scale2 = 15,
                transparency = 0,
                isLock= false,
                rotateTimer = null,
                modalOpendTimer = null,
                lightTimer = null,
                clicksNub = 0;
            //console.log(130/1080)
            $('.J-upgrade-btn').click(function () {

                if(isLock) return

                clicksNub++

                console.log(clicksNub)

                if (percentage > 0) {
                    if(clicksNub === 1){
                        percentage -= scale2
                    }else{
                        percentage -= scale
                    }                
                    transparency = (100 - percentage) / 100
                }
                //console.log(transparency)
                // let transparency = percentage/200
                // console.log(transparency)            
                let h = percentage + "%";
                var distance = (100-percentage-8.75) + '%';
                console.log(distance)
                newWordContainer.find('.mask-img').css("height", h)
                               

                if(clicksNub === 18){
                    // newWordContainer.find('.bot-light').addClass('change') 
                    newWordContainer.find('.bot-light').css("opacity","0")                   
                } 

                newWordContainer.find('.bot-light').css("opacity","1")            
                newWordContainer.find('.bot-light').css("bottom", distance)

                
                // newWordContainer.find('.lihgt').css("opacity", transparency)
                newWordContainer.find('.lihgt').addClass('active')
                // clearTimeout(lightTimer) 
                if (percentage !== 0) {
                    lightTimer = setTimeout(function () {
                        newWordContainer.find('.lihgt').removeClass('active')
                    }, 250)
                }
                // newWordContainer.find('.mask-img').css('opacity',transparency)
                if (percentage == 0) { 
                    
                    InitializeConfetti() // 五彩纸屑开始飘落
                    
                    clearTimeout(rotateTimer)
                    clearTimeout(modalOpendTimer)
                    rotateTimer = setTimeout(function () {
                        newWordContainer.addClass('active')
                        $('.hand').css("display", "none")
                    }, 250)
                    modalOpendTimer = setTimeout(() => {
                        modalboxOpend()
                    }, 1000)

                    isLock = true // 按钮锁住不能点击
                }
            })

            $('.J-upgrade-btn').on("touchstart", function () {
                $(this).addClass("active");
            })
            $('.J-upgrade-btn').on("touchend", function () {
                if (percentage !== 0) {
                    $(this).removeClass("active");
                }
            })
            //modalboxOpend()

            $('.J-rule-btn').click(function () {
                $('.rule-popup').addClass('opened')
            })
            $('.rule-popup .close').click(function () {
                $('.rule-popup').removeClass('opened')
            })

        })
    </script>
    <script src="js/wx_share.js"></script>
</body>

</html>